<HTML>
<HEAD>
	<TITLE>JavaScript Toolbox - Dynamic Option List</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="tmp/DynamicOptionList.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var listB = new DynamicOptionList("B","A");
/*listB.addOptions("West","California","California","Washington","Washington");
listB.addOptions("Midwest","Iowa","Iowa","Illinois","Illinois");
listB.addOptions("East","New York","New York","Florida","Florida");
//listB.setDefaultOption("West","California");
//listB.setDefaultOption("Midwest","Iowa");
//listB.setDefaultOption("East","Florida"); 

var listC = new DynamicOptionList("C","A","B");
listC.addOptions("West|California","Los Angeles","Los Angeles","San Diego","San Diego");
listC.addOptions("West|Washington","Redmond","Redmond","Seattle","Seattle");
listC.addOptions("Midwest|Iowa","Davenport","Davenport","Des Moines","Des Moines");
listC.addOptions("Midwest|Illinois","Chicago","Chicago","Moline","Moline");
listC.addOptions("East|New York","New York","New York","Albany","Albany");
listC.addOptions("East|Florida","Talahassee","Talahassee","Orlando","Orlando"); */

var listE = new DynamicOptionList("E","D");
listE.addOptions("class1","or.1","or.1","or.2","or.2","or.3","or.3");
listE.addOptions("class2","or.4","or.4","or.5","or.5");
listE.addOptions("class3","or.6","or.6","or.7","or.7");
//listE.setDefaultOption("West","California");
//listE.setDefaultOption("Midwest","Iowa");
//listE.setDefaultOption("East","Florida");

var listF = new DynamicOptionList("F","D","E");
listF.addOptions("class1|or.1","genera1","genera1","genera2","genera2");
listF.addOptions("class1|or.2","genera3","genera3","genera4","genera4");
listF.addOptions("class1|or.3","genera5","genera5","genera6","genera6");
listF.addOptions("class2|or.4","genera7","genera7","genera8","genera8");
listF.addOptions("class2|or.5","genera9","genera9","genera10","genera10");
listF.addOptions("class3|or.6","genera11","genera11","genera12","genera12");
listF.addOptions("class3|or.7","genera13","genera13","genera14","genera14");

function init() {
	var theform = document.forms[0];
	//listB.init(theform);
	//listC.init(theform);
	listE.init(theform);
	listF.init(theform);
	}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F" onLoad="init()">


<FORM ACTION="" METHOD="">

<!-- <TABLE BORDER="1">


<TR>
	<TD>
		<SELECT NAME="A" onChange="listB.populate();listC.populate();">
			<OPTION VALUE="West">West
			<OPTION VALUE="Midwest">Midwest
			<OPTION VALUE="East">East
		</SELECT>

	</TD>
	<TD>
		<SELECT NAME="B" onChange="listC.populate();">
			<SCRIPT LANGUAGE="JavaScript">listB.printOptions()</SCRIPT>
		</SELECT>
	</TD>
	<TD>
		<SELECT NAME="C">

			<SCRIPT LANGUAGE="JavaScript">listC.printOptions()</SCRIPT>
		</SELECT>
	</TD>
</TR>
</TABLE> -->

<BR><BR>

<B>Multiple Select:</B><BR>
<TABLE BORDER="1">
<TR>
	<TH>Class</TH>

	<TH>Order</TH>
	<TH>Genus</TH>
</TR>
<TR>
	<TD>
		<SELECT NAME="D" multiple size=5 onChange="listE.populate();listF.populate();">
			<OPTION VALUE="class1">class1
			<OPTION VALUE="class2">class2
			<OPTION VALUE="class3">class3
		</SELECT>

	</TD>
	<TD>
		<SELECT NAME="E" multiple size=5 onChange="listF.populate();">
			<SCRIPT LANGUAGE="JavaScript">listE.printOptions()</SCRIPT>
		</SELECT>
	</TD>
	<TD>
		<SELECT NAME="F" multiple size=5 onChange="alert('hello');">

			<SCRIPT LANGUAGE="JavaScript">listF.printOptions()</SCRIPT>
		</SELECT>
	</TD>
</TR>
</TABLE>


</BODY>
</HTML>
